<template>
	<view>
		<view>
			<img class="tu" src="../../static/tips.png" alt="">
                       【向左滑动】会有操作箱：修改和删除	
		</view>
		<view v-for="(item,index) in goodslist" :key="index">
			<uni-swipe-action class='lll'>
								<uni-swipe-action-item
								  
								    :right-options="options2"
								    :show="isOpened"
								    :auto-close="false"
								    @click="bindClick($event,item.orders,item.title)"
								>
									<view class="content-box">
										<text class="content-text text">{{item.title}}</text>
									</view>
								</uni-swipe-action-item>
							</uni-swipe-action>
		</view>
		
		<button @click="xinzeng" class="aaa">新增货品类别</button>
		
				
				
	</view>
	
</template>

<script>
	
	export default {
		
		data() {
			return {
				goodslist:[],
				show: false,
				isOpened: 'none',
									
				options2: [{
						text: '修改',
						style: {
							backgroundColor: '#fccc04',
							height: '30px',
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: 'red'
						}
					}
				],
									
			
			}
		},
		created() {
		  //   this.$axios.get("http://localhost:3000/fenlei").then((res) => {
		  //     console.log("请求结果是....");
		  //     console.log(res.data);
		  //     this.goodslist = res.data
			 
		  //   }),
			uni.request({
			    url: 'http://localhost:3000/fenlei', //仅为示例，并非真实接口地址。
			   
			    success: (res) => {
			        console.log(res.data.data);
			      this.goodslist = res.data.data
			    }
			});
		  },
		methods: {
			xinzeng(){
			uni.navigateTo({
				url: '/pages/Classification/newly'
			});
			},
			
			bindClick(e,aa,bb) {
				console.log(e);
				
				if(e.index==0){
					uni.navigateTo({
						url: '/pages/Classification/modification?id='+ aa +'&&title=' +bb
					});
				}else{
					uni.showModal({
						title: '   ',
						content: '是否删除',
						success: function (res) {
							if (res.cancel) {
							console.log('用户点击取消');
							} else if (res.confirm) {
							console.log('用户点击确定');
							console.log(bb);
							uni.request({					
							url:'http://localhost:3000/delete',
							data:{ 
									qa:bb,
									}
							}).then((res) => {
								console.log("请求结果是....");
								console.log(res.data);		
								}),
								uni.navigateTo({
									url: '/pages/Classification/allclassify'
								});
							}
						}
					});
				}
				// uni.showToast({
				// 	title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
				// 	icon: 'none'
				// });
			},
		},
		
	}
</script>

<style>
	.lll{
		margin-top: 5px;
	}
		
	.content-box {
			flex: 1;
			/* #ifdef APP-NVUE */
			justify-content: center;
			
			/* #endif */
			width: 90%;
			height: 44px;
			line-height: 44px;
			padding: 0 15px;
			position: relative;
			background-color: #fff;
			border-bottom-color: #f5f5f5;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			margin: 0 auto;
			border-radius: 4px;
		}
	
	.button-hock{
		height: 44px;
	}
		.content-text {
			font-size: 15px;
			
		}
	
	
	.tu{
		width: 15px;
		height: 15px;
			
		margin-top: 10px;
		margin-left: 5px;
	
	}


.aaa{
	width: 150px;
	height: 30px;
	line-height: 30px;
	color: black;
	background-color: #fccc04;
	position: relative;
	left: 30%;
	top: 30px;
	font-weight:bolder;
	
	
}
.btn{
	width: 160px;
	display: flex;
	position: absolute;
	right: 0 ;
}
</style>
